<template>
  <div id="chart3" style="width: 100%;height:100%;"></div>
</template>

<script>
import { getDicts } from '../../../api/system/dict/data'

export default {
  name: "echart3",
  data(){
    return{
      data_List: [
        {
          name: '',
          value: ''
        }
      ]
    }
  },
  mounted() {
    this.getChartData()
  },
  methods:{
    //获取图表数据
    getChartData() {
      const response = getDicts('map_industry_mastermind').then(response => {
        this.data_List = response.data.map(item => {
          return {
            name: item.dictLabel,
            value: item.dictValue
          }
        })
        this.initEcharts1()
      })
    },
    initEcharts1(){
      const myChart = this.$echarts.init(document.getElementById('chart3'), null, {devicePixelRatio: 2.5});
      // 指定图表的配置项和数据
      var img = '';
      const option = {
        // 控制提示
        tooltip: {
          // 非轴图形，使用item的意思是放到数据对应图形上触发提示
          trigger: 'item',
          // 格式化提示内容：
          // a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
          formatter: "{b} : {c} ({d}%)"
        },
        // 控制图表
        series: [
          {
            // 图表名称
            name: '产业',
            // 图表类型
            type: 'pie',
            // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
            // 百分比基于  图表DOM容器的半径
            radius: ['10%', '70%'],
            // 图表中心位置 left 50%  top 50% 距离图表DOM容器
            center: ['50%', '50%'],
            // 半径模式，另外一种是 area 面积模式
            roseType: 'radius',
            // 数据集 value 数据的值 name 数据的名称
            data:this.data_List,
            //文字调整
            label: {
              fontSize: 13,
              formatter:'{b}: \n{d}%'
            },
            //引导线
            labelLine: {
              length: 8,
              length2: 10
            }
          }
        ],
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
      };
      myChart.setOption(option);

      myChart.currentIndex = -1;

      setInterval(function () {
        var dataLen = option.series[0].data.length;
        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: myChart.currentIndex
        });
        myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: myChart.currentIndex
        });
      }, 1000);
      window.addEventListener("resize",function(){
        myChart.resize();
      });
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize",function(){
        myChart.resize();
      });
    }
  }
}
</script>

<style scoped>

</style>
